<template>
  <el-dialog v-model="isShow" title="选择身份" class="select-role">
    <div class="select-role-list">
      <el-radio
        v-for="role in roleList"
        :key="role.roleId"
        :value="role.roleId"
        border
        class="select-role-item"
        v-model="currentRole"
        @click="selectRole(role)"
      >
        {{ role.roleTitle }}
      </el-radio>
    </div>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { ElDialog, ElRadio } from 'element-plus'
import useUserStore from '@/stores/user'
import { Role_Enum } from '@/common/enum'
const userStore = useUserStore()
const props = defineProps({
  resolve: {
    type: Function,
    default: () => {},
  },
  reject: {
    type: Function,
    default: () => {},
  },
})

let roleList = reactive([])
const currentRole = ref('')
const getRoleList = async () => {
  await userStore.getAllRoles()
  const filterRoles = storeToRefs(userStore).allRoles.value.filter(
    (item) => ![Role_Enum.sys_admin, Role_Enum.sys_visitor].includes(item.roleId),
  )
  filterRoles.forEach((role) => roleList.push(role))
}
getRoleList()

const isShow = ref(false)
const show = () => {
  isShow.value = true
}
const close = () => {
  isShow.value = false
}
const selectRole = (role) => {
  close()
  props.resolve(role)
}
defineExpose({
  show,
  close,
})
</script>

<style lang="scss">
.select-role {
  width: 352px;
  &-list {
    display: flex;
    flex-direction: column;
  }
  &-item {
    margin: 18px 0 0 0;
    &:first-child {
      margin-top: 0;
    }
  }
}
</style>
